<template>
    <a-drawer :title="title" :width="500" @close="handleCancel" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm"
                      :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">


            <a-form-model-item label="编号" prop="code" ref="code">
                <a-input :placeholder="placeholder.code"
                         v-model="form.code" :disabled="isUpdate"/>
            </a-form-model-item>
            <a-form-model-item label="姓名" prop="name" ref="name">
                <a-input :placeholder="placeholder.name" v-model="form.name"/>
            </a-form-model-item>


            <a-form-model-item label="部门" prop="deptCode" ref="deptCode">

                <!--部门选择器 返回的值重新解构数据-->

                <DeptSelect
                        :value="form.deptCode"
                        @deptSelectResult="(e)=>{ form.deptCode=e }"
                />

            </a-form-model-item>


            <a-form-model-item label="职务" prop="positionCode" ref="positionCode">
                <PositionSelect :code="form.positionCode"
                                :placeholder="'请选择职务'"
                                @positionSelectResult="(e)=>{ form.positionCode=e ;}"
                />
            </a-form-model-item>


            <!-- 状态 -->
            <a-form-model-item label="状态" prop="status" ref="status">
                <a-radio-group v-model="form.status" button-style="solid">
                    <a-radio-button v-for="(item,index) in StaffStatusOPT"
                                    :key="index" :value="item.value">{{item.label}}
                    </a-radio-button>

                </a-radio-group>
            </a-form-model-item>


            <!--头像上传-->
            <a-form-model-item label="头像" ref="avatar">
                <!--头像上传组件-->
                <avatarUpload :imgUrl="form.avatar" @callBack="(e)=>{ form={...form,...{avatar:e}}}"/>

            </a-form-model-item>
            <a-form-model-item label="证件号" prop="idCard" ref="idCard">
                <a-input :placeholder="placeholder.idCard" v-model.number="form.idCard"/>
            </a-form-model-item>


            <a-form-model-item label="性别" prop="sex" ref="sex">
                <a-select showSearch showArrow allowClear
                          :placeholder="placeholder.sex"
                          v-model="form.sex">
                    <a-select-option v-for="(item,index)  in StaffSexOPT " :key="index"
                                     :value="item.value">
                        {{item.label}}
                    </a-select-option>
                </a-select>
            </a-form-model-item>


            <a-form-model-item label="生日" prop="birthday" ref="birthday">

                <a-date-picker
                        :allowClear="false"
                        :placeholder="placeholder.birthday"
                        :value="form.birthday"
                        @change="dateOnChange"
                        format="YYYY-MM-DD"
                />


            </a-form-model-item>


            <a-form-model-item label="电话" prop="phone" ref="phone">
                <a-input :placeholder="placeholder.phone" v-model.number="form.phone"/>
            </a-form-model-item>


        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import moment from 'moment';
    import {dictLoad} from '../../../util/internal.api';
    import {staffAdd, staffUpdate} from '../public/http';

    export default {
        props: ['editRecord'],
        data() {
            return {
                title: '新增人员',
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                visible: true, //modal 显示状态
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 4
                    }
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 18
                    }
                },

                placeholder: {
                    code: '人员编码',
                    name: '人员名称',
                    deptCode: "请选择所属部门",
                    positionCode: "请选择人员职务",

                    status: '人员状态',
                    description: '人员备注',
                    sex: "人员性别",
                    birthday: "出生日期",
                    idCard: "证件号码",
                    phone: "联系电话",

                },
                form: {
                    code: "",
                    name: "",
                    deptCode: undefined,
                    positionCode: null,
                    status: null,
                    sex: undefined,
                    birthday: null,
                    idCard: "",
                    phone: "",

                },
                rules: {


                    code: [
                        {
                            required: true,
                            message: '请设置人员编码',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '人员编码最多设置20个字符',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^[a-zA-Z0-9_]+$/,
                            message: '人员编码只允许使用数字或字母',
                            trigger: 'blur'
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: '请设置人员名称',
                            trigger: 'blur'
                        },
                        {
                            max: 50,
                            message: '人员名称最多设置50个字符',
                            trigger: 'blur'
                        }
                    ],

                    deptCode: {
                        required: true,
                        message: '请选择所属部门',
                        trigger: 'blur'
                    },

                    positionCode: {
                        required: true,
                        message: '请选择人员职务',
                        trigger: 'blur'
                    },

                    status: [

                        {
                            required: true,
                            message: '请选择人员状态',
                            trigger: 'blur'
                        },
                        //自定义方法一个
                        {
                            validator: (rule, value, callback) => {
                                if (value < 0 || value >= 1000) {
                                    callback(new Error('排序数字不能超过3位数!'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur'
                        }
                    ],

                },

                //系统角色字典

                StaffSexOPT: [], //性别选项字典
                StaffStatusOPT: [], //人员状态选项字典


            };
        },

        components: {
            //部门选择器
            DeptSelect: resolve => {
                require(['../component/DeptSelector.vue'], resolve);
            },

            //职务选择器
            PositionSelect: resolve => {
                require(['../component/PositionSelector.vue'], resolve);
            },


            //头像上传组件
            avatarUpload: resolve => {
                require(['./AvatarUpload.vue'], resolve);
            }
        },

        methods: {
            //生日控件格式化
            dateOnChange(date) {
                this.form.birthday = moment(date).format('YYYY-MM-DD');

            },


            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {
                            staffUpdate(this.form.id, this.form).then(res => this.xhrMsg(res));
                        } else {
                            staffAdd(this.form).then(res => this.xhrMsg(res));
                        }
                    }
                });
            },
            //新增和删除返回相同的消息构造
            xhrMsg(res) {
                if (res.code === 0) {
                    //成功提醒
                    this.$notification.success({
                        message: '操作成功',
                        description: res.message
                    });
                    this.visible = false;
                    this.$emit('closeFun', {
                        render: true
                    });
                } else {
                    //错误提醒
                    this.$notification.error({
                        message: '操作失败',
                        description: res.message
                    });
                }
                this.loading = false;
            },
            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeFun', {
                    render: false
                });
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};

                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑人员';
                }

            },
            //数据初始化
            async init() {

                //性别
                await dictLoad('StaffSex').then(res => (this.StaffSexOPT = res));
                //状态
                await dictLoad('StaffStatus').then(res => (this.StaffStatusOPT = res));

                this.fromVal();
            }
        },


        created() {
            this.init();
        }
    };
</script>
